import React from 'react'
import './Registered.css'
import { Button, Checkbox, Form, Input, message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import logo from '../images/logo.png'
import axios from 'axios';

const Registered = (props) => {

    const onFinish = (data) => {
        const loginData = { "username": data.username, "password": data.password }
        axios.post('http://192.168.72.166:8080/api/registerUsers', loginData)
            .then(res => {
                console.log(res.data);
                if (res.data.data.error) {
                    message.error("此用户名已被注册，请更改用户名")
                }
                else {
                    message.success("注册成功")
                    window.alert('注册成功,请使用该账号登入')
                    props.history.replace('/');

                }
            })
    }
    const onBack = () => {
        props.history.replace('/')
    }

    return (
        <div className='log-1'>
            <div className='log-2'>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                ><img src={logo} />
                    <p className='p'>注 册</p>
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入账号名/邮箱/手机号！',
                            },
                        ]}
                    >
                        <Input
                            prefix={<UserOutlined className="site-form-item-icon" />}
                            placeholder="账号名/邮箱/手机号"
                        />
                        {/* <p>账号不能为汉字!</p> */}
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入登录密码！',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入登录密码"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button htmlType="submit" block >
                            注册
                        </Button>
                    </Form.Item>
                    <Form.Item>
                        <Button block onClick={onBack}>
                            返回
                        </Button>
                    </Form.Item>
                </Form>
            </div >
        </div>
    )
}


export default Registered;
